<template>
  <div class="securityAlarmLine">
    <div class="top">
      <div>
        <RadioGroup v-model="border" @on-change="fnChangeRadioGroup">
          <Radio label="高风险" border></Radio>
          <Radio label="中风险" border></Radio>
          <Radio label="低风险" border></Radio>
        </RadioGroup>
      </div>
      <div>
        <DatePicker
          type="daterange"
          :start-date="new Date(1991, 4, 14)"
          placement="bottom-end"
          placeholder="请选择开始日期 - 请选择结束日期"
          style="width: 500px"
        />
      </div>
    </div>
    <div
      class="chart"
      :id="`line-${id}`"
      style="width:100%;height:260px;"
    ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      option: {
        color: ["#4B88EB", "#46A2C6", "#ADD8E6"],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(13, 64, 71, 0.50)",
          borderColor: "rgba(143, 225, 252, 0.60)",
          padding: 8,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          data: [],
          icon: "rect",
          itemWidth: 14,
          itemHeight: 14,
          top: 20,
          right: 15,
          textStyle: {
            fontSize: 14,
            color: "#737A85",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            // 轴线设置
            show: false, // 显示轴线
          },
          axisLabel: {
            textStyle: {
              color: "#737A85", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
          data: this.lineData.category,
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#737A85",
              type: "dashed",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#737A85", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
        },
        series: [
          {
            name: "高风险",
            type: "line",
            smooth: true,
            show: true, // 显示该折线
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              shadowColor: "#fff",
              shadowBlur: 10,
            },
            label: {
              show: true,
              position: "right",
              color: "#fff",
            },
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "RGBA(75,136,235, 0.6)",
                },
                {
                  offset: 1,
                  color: "RGBA(75,136,235, 0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.lineData.data[0],
          },
          {
            name: "中风险",
            type: "line",
            smooth: true,
            show: true, // 显示该折线
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              shadowColor: "#fff",
              shadowBlur: 10,
            },
            label: {
              show: true,
              position: "right",
              color: "#fff",
            },
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "RGBA(70,162,198, 0.6)",
                },
                {
                  offset: 1,
                  color: "RGBA(70,162,1985, 0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.lineData.data[1],
          },
          {
            name: "低风险",
            type: "line",
            smooth: true,
            show: true, // 显示该折线
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              shadowColor: "#fff",
              shadowBlur: 10,
            },
            label: {
              show: true,
              position: "right",
              color: "#fff",
            },
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "RGBA(173, 216, 230, 0.6)",
                },
                {
                  offset: 1,
                  color: "RGBA(173, 216, 230, 0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.lineData.data[2],
          },
        ],
      },
      border: "高风险",
      echart: null,
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    lineData: {
      type: Object,
      require: true,
    },
  },
  methods: {
    fnChangeRadioGroup(val) {
      if (val === "全部") {
        this.option.series[0].data = this.lineData.data[0];
        this.option.series[1].data = this.lineData.data[1];
        this.option.series[2].data = this.lineData.data[2];
      } else if (val === "高风险") {
        this.option.series[0].data = this.lineData.data[0];
        this.option.series[1].data = [];
        this.option.series[2].data = [];
      } else if (val === "中风险") {
        this.option.series[0].data = [];
        this.option.series[1].data = this.lineData.data[1];
        this.option.series[2].data = [];
      } else if (val === "低风险") {
        this.option.series[0].data = [];
        this.option.series[1].data = [];
        this.option.series[2].data = this.lineData.data[2];
      }
      this.echart.setOption(this.option);
    },
    fnDrawPie() {
      this.echart = this.$echarts.init(
        document.getElementById(`line-${this.id}`)
      );
      this.echart.setOption(this.option);
    },
  },
  mounted() {
    this.fnDrawPie();
    this.fnChangeRadioGroup("高风险");
  },
};
</script>
<style lang="less" scoped>
.securityAlarmLine {
  width: 100%;
  height: 100%;
  color: #fff;

  .top {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
  }
}
</style>
<style lang="less">
.securityAlarmLine {
  .ivu-input {
    background-color: #0a2d58;
    border-color: #0a2d58;
    color: #5277a2;
  }

  .ivu-picker-panel-body {
    background-color: #0e2043;
  }

  .ivu-input::placeholder {
    color: #5277a2;
    /* 将颜色值替换为你想要的占位符颜色 */
  }

  .ivu-radio-inner {
    background-color: #283451;
    border: 1px solid #283451;
  }

  .ivu-radio-border {
    color: #5277a2;
    border: 1px solid #5277a2;
  }
}
</style>
